<template>
  <view class="page-wraper">
    <scroll-view
      scroll-y="true"
      :style="'height:' + scroll_height + ';'"
      refresher-enabled
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @scrolltolower="lower"
    >
      <view class="contentViewBox">
        <cssArcBackground bgColor="#4E6ECC" height="100" />
        <view class="swiperImageViewClass">
          <view class="view-box-secondhand-header-box">
            <view class="view-item" @click="viewItemClick(2)">
              <image
                class="view-item-image"
                src="@/static/ershouche.png"
                style="height: 41.6rpx; width: 48.53rpx"
              />
              <text class="view-item-text">买二手车</text>
            </view>
            <view class="view-item" @click="viewItemClick(0)">
              <image
                class="view-item-image"
                src="@/static/car.png"
                style="height: 45.68rpx; width: 50.98rpx"
              />
              <text class="view-item-text">我的车源</text>
            </view>
            <view class="view-item" @click="viewItemClick(1)">
              <image
                class="view-item-image"
                src="@/static/save-white.png"
                style="height: 42.22rpx; width: 44rpx"
              />
              <text class="view-item-text">我的收藏</text>
            </view>
          </view>

          <view class="selected-view-box">
            <scroll-view
              :scroll-x="true"
              class="selected-header-box-common marginTop30"
              v-if="btnList.length > 0"
            >
              <view
                v-for="(item, index) in btnList"
                :key="index"
                class="header_item_box"
              >
                <view
                  class="view-text-common-box"
                  @click="scrollItemClick(item, index, 2)"
                >
                  <image
                    class="item-image-class"
                    :src="item.cover_url"
                    mode="heightFix"
                  >
                  </image>
                  <view class="view-text-common">{{ item.name }}</view>
                </view>
                <view
                  class="flex1"
                  v-if="
                    btnList.length < 1
                      ? index + 1 == btnList.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
                <view
                  class="flex1"
                  v-if="
                    btnList.length < 2
                      ? index + 1 == btnList.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
                <view
                  class="flex1"
                  v-if="
                    btnList.length < 3
                      ? index + 1 == btnList.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
                <view
                  class="flex1"
                  v-if="
                    btnList.length < 4
                      ? index + 1 == btnList.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
                <view
                  class="flex1"
                  v-if="
                    btnList.length < 5
                      ? index + 1 == btnList.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
              </view>
            </scroll-view>
            <!-- 金额 -->
            <scroll-view :scroll-x="true" class="selected-header-box">
              <view
                v-for="(item, index) in priceConditionData"
                :key="index"
                class="header_item_box"
              >
                <view
                  class="scroll-view-item-view text-item"
                  @click="scrollItemClick(item, index, 0)"
                >
                  {{ item.name }}
                </view>
                <view
                  class="flex1"
                  v-if="
                    priceConditionData.length < 2
                      ? index + 1 == priceConditionData.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
                <view
                  class="flex1"
                  v-if="
                    priceConditionData.length < 3
                      ? index + 1 == priceConditionData.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
                <view
                  class="flex1"
                  v-if="
                    priceConditionData.length < 4
                      ? index + 1 == priceConditionData.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
              </view>
            </scroll-view>
            <!-- 燃油类型 -->
            <scroll-view :scroll-x="true" class="selected-header-box">
              <view
                v-for="(item, index) in fuelTypeWhereData"
                :key="index"
                class="header_item_box"
              >
                <view
                  class="scroll-view-item-view text-item"
                  @click="scrollItemClick(item, index, 1)"
                >
                  {{ item.name }}
                </view>
                <view
                  class="flex1"
                  v-if="
                    fuelTypeWhereData.length < 2
                      ? index + 1 == fuelTypeWhereData.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
                <view
                  class="flex1"
                  v-if="
                    fuelTypeWhereData.length < 3
                      ? index + 1 == fuelTypeWhereData.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
                <view
                  class="flex1"
                  v-if="
                    fuelTypeWhereData.length < 4
                      ? index + 1 == fuelTypeWhereData.length
                        ? true
                        : false
                      : false
                  "
                >
                </view>
              </view>
            </scroll-view>
          </view>

          <!-- <view class="list-header">
									<view :class="temp==0?'headerTitle-selected':'headerTitle'" @click="headerTitleClick(0)">猜你喜欢</view>
									<view class="center-line"></view>
									<view :class="temp==1?'headerTitle-selected':'headerTitle'" @click="headerTitleClick(1)">浏览历史</view>
								</view> -->
          <view class="msg-view-box">
            <view class="recommend-car-source-class">推荐车源</view>
          </view>

          <view
            class="waterfall-box h-flex-x h-flex-2"
            v-if="
              waterfall.status != 'empty'
                ? leftDataList.length > 0
                  ? true
                  : false
                : false
            "
          >
            <view class="waterfall-box-left-right">
              <view
                v-for="(left_item, left_index) in leftDataList"
                :key="left_index"
              >
                <helangWaterfallItem
                  :item="left_item"
                  tag="left"
                  @itemOnClick="itemOnClick"
                >
                </helangWaterfallItem>
              </view>
            </view>
            <view class="waterfall-box-left-right">
              <view
                v-for="(right_item, right_index) in rightDataList"
                :key="right_index"
              >
                <helangWaterfallItem
                  :item="right_item"
                  @itemOnClick="itemOnClick"
                  tag="right"
                >
                </helangWaterfallItem>
              </view>
            </view>
          </view>
          <view v-if="waterfall.status == 'await'">
            <view class="load-txt">上拉加载更多</view>
          </view>
          <view v-else-if="waterfall.status == 'loading'">
            <view class="load-txt">加载中...</view>
          </view>
          <view v-else-if="waterfall.status == 'success'">
            <view class="load-txt">加载中</view>
          </view>
          <view v-else-if="waterfall.status == 'finish'">
            <view class="load-txt">没有更多了</view>
          </view>
          <view v-else-if="waterfall.status == 'fail'">
            <image class="load-icon" src="@/static/NoDataBac.png"></image>
            <view class="load-txt">出错了，请刷新重试</view>
          </view>
          <view v-else-if="waterfall.status == 'empty'">
            <image class="load-icon" src="@/static/NoDataBac.png"></image>
            <view class="load-txt">暂无数据</view>
          </view>
          <view v-else
            ><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG -->
            <view class="load-txt-yincang">没有数据了</view>
          </view>
          <view class="height100"></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
import addressSearch from "@/components/addressSearch/addressSearch.vue";
import helangWaterfallItem from "@/secondhandCar/Waterfall/waterfall-item.vue";
import { getPersonInfo } from "@/api/user.js";
import { getUsedCarDetails } from "@/api/secondhandCar.js";
import {
  getHotBrand,
  getPriceWhere,
  getFuelTypeWhere,
  getRecommendCarList,
} from "@/api/secondhandCar.js";
export default {
  components: {
    addressSearch,
    cssArcBackground,
    helangWaterfallItem,
  },
  props: {
    scrollTop: {
      type: Number,
      default: 0,
    },
    scroll_height: {
      type: String,
      default: "100vh",
    },
    isLogin: {
      type: Boolean,
      default: true,
    },
    // sreach: {
    // 	type: String,
    // 	default: ''
    // }
  },
  data() {
    return {
      sreach: "",
      where_city_id: "",
      isNoData: true,
      btnList: [],
      priceConditionData: [],
      fuelTypeWhereData: [],
      carListData: [],

      page: 1, //第几页数据
      page_num: 15,
      last_page: 0, //总页数
      isShowMore: false,
      isEnd: false,
      triggered: false,
      isfreshing: false,
      isShowList: true,

      temp: 0,

      // 异步请求相关
      ajax: {
        // 是否可以加载
        load: true,
        // 每页的请求条件
        rows: 10,
        // 页码
        page: 1,
        // 数据列表
        dataList: [],
      },

      // 瀑布流组件相关
      waterfall: {
        status: "",
        reset: false,
        list: [],
      },
      leftDataList: [],
      rightDataList: [],
      isfirst: true,

      users_id: "",
      endName: "",
    };
  },
  mounted() {
    const value = uni.getStorageSync("login");
    if (value) {
      this.users_id = value.id;
    }
    const location = uni.getStorageSync("address");
    this.$utils.log(
      "dayiin huoqudao de xinagqing location  " + JSON.stringify(location)
    );
    if (location) {
      this.endName = location.name;
      this.where_city_id = location.id;
    }

    var that = this;
    //获取热门品牌
    getHotBrand().then((res) => {
      that.$utils.log("打印获取热门品牌数据  " + JSON.stringify(res));
      if (res.code == 0) {
        that.btnList = res.data;
        that.$forceUpdate();
      }
    });
    //获取金额条件
    getPriceWhere().then((res) => {
      if (res.code == 0) {
        that.priceConditionData = res.data;
        that.$forceUpdate();
      }
    });
    //获取燃油条件
    getFuelTypeWhere().then((res) => {
      if (res.code == 0) {
        that.fuelTypeWhereData = res.data;
        that.$forceUpdate();
      }
    });
    //获取车源列表

    this.pageGetRecommendCarList();
  },
  methods: {
    //点击搜索框传递参数并进行数据列表请求更新
    secondhandCarCS(city, sreach) {
      this.$utils.log(
        "打印点击搜索框传递过来的参数 city " + city + "  sreach  " + sreach
      );
      this.sreach = sreach;
      this.where_city_id = city;
      this.ajax.page = 1;
      this.ajax.load = true;
      this.triggered = false;
      this.isfirst = true;
      this.pageGetRecommendCarList();
    },
    scrollFun(event) {
      this.$utils.log("打印滑动   " + JSON.stringify(event.detail.scrollTop));
      this.scrollTop = event.detail.scrollTop;
    },

    scrollItemClick(item, index, inta) {
      this.$utils.log("打印选择的内容  " + JSON.stringify(item));
      switch (inta + "") {
        case "0": {
          uni.navigateTo({
            url:
              "/secondhandCar/secondhandCarList/secondhandCarList?start_price=" +
              item.start +
              "&end_price=" +
              item.end +
              "&priceSelected=" +
              item.name,
          });
          break;
        }
        case "1": {
          uni.navigateTo({
            url:
              "/secondhandCar/secondhandCarList/secondhandCarList?fuel_type_id=" +
              item.id +
              "&fuel_type_name=" +
              item.name,
          });
          break;
        }
        case "2": {
          this.$utils.log("打印点击品牌按钮 " + item.name);
          uni.navigateTo({
            url:
              "/secondhandCar/secondhandCarList/secondhandCarList?carBrandSelected=" +
              item.name +
              "&id=" +
              item.id,
          });
          break;
        }
      }
    },
    viewItemClick(inta) {
      const value = uni.getStorageSync("login");
      if (!value) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return;
      }
      switch (inta + "") {
        case "0": {
          if (value) {
            uni.navigateTo({
              url: "/secondhandCar/meCarSource/meCarSource",
            });
          } else {
            uni.navigateTo({
              url: "/pages/login/login",
            });
          }
          break;
        }
        case "1": {
          if (value) {
            uni.navigateTo({
              url: "/secondhandCar/meSave/meSave",
            });
          } else {
            uni.navigateTo({
              url: "/pages/login/login",
            });
          }

          break;
        }
        case "2": {
          uni.navigateTo({
            url: "/secondhandCar/secondhandCarList/secondhandCarList",
          });
          break;
        }
      }
      return;
      let userid = value.id;
      getPersonInfo(userid).then((res) => {
        let data = res.data;
        let personAuth = false;
        if (data.length == 0) {
        } else {
          let examine = data.examine;
          if (examine == 1) {
            personAuth = true;
          } else {
            personAuth = false;
          }
        }

        if (personAuth) {
          this.$utils.log(inta);
          switch (inta + "") {
            case "0": {
              if (value) {
                uni.navigateTo({
                  url: "/secondhandCar/meCarSource/meCarSource",
                });
              } else {
                uni.navigateTo({
                  url: "/pages/login/login",
                });
              }
              break;
            }
            case "1": {
              if (value) {
                uni.navigateTo({
                  url: "/secondhandCar/meSave/meSave",
                });
              } else {
                uni.navigateTo({
                  url: "/pages/login/login",
                });
              }

              break;
            }
            case "2": {
              uni.navigateTo({
                url: "/secondhandCar/secondhandCarList/secondhandCarList",
              });
              break;
            }
          }
        } else {
          uni.showModal({
            title: "提示",
            content: "需要先通过认证才能报价",
            confirmText: "去认证",
            confirmColor: "#0E59EA",
            cancelText: "我知道了",
            cancelColor: "#333333",
            success: function (res) {
              if (res.confirm) {
                uni.navigateTo({
                  url: "/pages/user/auth/auth",
                });
              }
            },
          });
        }
      });
    },
    // 瀑布流组件点击事件
    itemOnClick(item) {
      this.$utils.log("打印点击item返回的数据" + JSON.stringify(item));
      var that = this;
      getUsedCarDetails(item.id, this.users_id, this.endName).then((res) => {
        this.$utils.log("打印点击item返回的数据" + JSON.stringify(res));
        if (res.code == 0) {
          that.dataObject = res.data;
          uni.navigateTo({
            url:
              "/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=" +
              item.id +
              "&isContent=" +
              true,
            events: {
              // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
              acceptDataFromOpenedPage: function (data) {
                that.$utils.log(
                  "打印返回数据 acceptDataFromOpenedPage  " +
                    JSON.stringify(data)
                );
              },
              someEvent: function (data) {
                that.$utils.log(
                  "打印返回数据 someEvent   " + JSON.stringify(data)
                );
              },
            },
            success: function (res) {
              that.$utils.log(
                "打印发送数据 success   " + JSON.stringify(that.dataObject)
              );
              // 通过eventChannel向被打开页面传送数据
              res.eventChannel.emit(
                "acceptDataFromOpenerPage",
                that.dataObject
              );
            },
            fail: function (error) {
              that.$utils.log("打印发送数据 fail   " + JSON.stringify(error));
            },
          });
        } else {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
        }
      });
    },

    //请求数据列表
    pageGetRecommendCarList() {
      if (!this.ajax.load) {
        return;
      }
      if (!this.isfirst & (this.ajax.page == 1)) {
        this.triggered = true;
        this.$utils.log("打印刷新 并且不是第一次进来");
      }
      this.isfirst = false;
      this.ajax.load = false;
      // 设置状态为加载中
      this.waterfall.status = "loading";
      var that = this;
      //获取车源列表
      getRecommendCarList(
        this.ajax.rows,
        this.ajax.page,
        this.where_city_id,
        this.sreach
      ).then((res) => {
        that.$utils.log("进入了请求数据，并返回了数据" + JSON.stringify(res));
        // that.isShowList = false
        that.$nextTick(() => {
          // 第一页数据执行以下代码
          if (that.ajax.page == 1 && that.triggered) {
            // 关闭下拉
            // uni.stopPullDownRefresh();
            that.triggered = false;
            // 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
            that.waterfall.reset = true;
          }
          that.$utils.log(
            "进入了请求数据，并返回了数据" +
              JSON.stringify(res.data.data.length)
          );
          // 第一页没有数据时处理
          if ((res.data.data.length < 1) & (that.ajax.page == 1)) {
            // 设置组件为 暂无数据 状态
            that.waterfall.status = "empty";
            // 因没有数据 直接[]赋值给瀑布流 list 属性
            that.waterfall.list = [];
            that.leftDataList = [];
            that.rightDataList = [];
            return;
          }
          // 数据无效时处理
          if (!res.data.data || res.data.data.length < 1) {
            // 设置组件为 加载结束 状态
            that.waterfall.status = "finish";
            setTimeout(() => {
              that.waterfall.status = "";
            }, 3000);
            return;
          }

          // 将数据赋值给瀑布流 list 属性
          if (that.ajax.page == 1) {
            that.leftDataList = [];
            that.rightDataList = [];
            for (var i = 0; i < res.data.data.length; i++) {
              if (i % 2 == 0) {
                that.leftDataList.push(res.data.data[i]);
              } else {
                that.rightDataList.push(res.data.data[i]);
              }
            }
          } else {
            for (var i = 0; i < res.data.data.length; i++) {
              if (i % 2 == 0) {
                that.leftDataList.push(res.data.data[i]);
              } else {
                that.rightDataList.push(res.data.data[i]);
              }
            }
          }

          // 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
          if (that.ajax.page < res.data.last_page) {
            that.waterfall.status = "await";
            that.ajax.load = true;
          } else {
            that.waterfall.status = "finish";
            setTimeout(() => {
              that.waterfall.status = "";
            }, 3000);
            return;
          }
        });
      });
    },

    onRefresh() {
      // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
      setTimeout(() => {
        this.ajax.page = 1;
        this.ajax.load = true;
        this.pageGetRecommendCarList();
      }, 800);
    },

    lower() {
      this.ajax.page = this.ajax.page + 1;
      if (
        this.waterfall.status == "" ||
        this.waterfall.status == "finish" ||
        this.waterfall.status == "loading"
      ) {
        uni.showToast({
          title: "没有数据了",
          icon: "none",
        });
        this.$utils.log("没有数据了");
        return;
      }
      this.pageGetRecommendCarList();
    },
  },
};
</script>

<style>
.flex1 {
  flex: 1;
  width: 160rpx;
  height: 58rpx;
  border-radius: 14rpx;
  margin-left: 12rpx;
  margin-right: 12rpx;
  text-align: center;
  line-height: 58rpx;
}

.selected-header-box {
  white-space: nowrap;
  height: 80rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: auto;
}

.selected-header-box-common {
  white-space: nowrap;
  height: 165rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: auto;
}

.header_item_box {
  /* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.scroll-view-item-view {
  flex: 1;
  width: 160rpx;
  height: 58rpx;
  background: #ebebeb45;
  border-radius: 14rpx;
  margin-left: 6rpx;
  margin-right: 6rpx;
  text-align: center;
  line-height: 58rpx;
}

.marginTop30 {
  margin-top: 30rpx;
}

.marginTop20 {
  margin-top: 10rpx;
}

.height174 {
  height: 150rpx;
}

.secondhand-car-list-class {
  padding: 0rpx 30rpx;
}

.msg-view-box {
  width: 150rpx;
  height: 48rpx;
  margin-top: 34rpx;
  margin-left: 30rpx;
  background: url(/static/bac-small.png);
  background-size: 100% 100%; //背景图片能够显示全
}

.recommend-car-source-class {
  width: auto;
  height: 36rpx;
  font-size: 30rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  color: #000026;
  opacity: 1;
}

.page-wraper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.contentViewBox {
  width: 100%;
  height: auto;
  /* 父元素设置相对定位 */
  position: relative;
}

.swiperImageViewClass {
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘 50px */
  top: 0rpx;
  z-index: 1;
  text-align: center;
  margin-top: 5rpx;
  width: 100%;
  background-color: #ffffff00;
}

.view-box-secondhand-header-box {
  display: flex;
  margin: 0rpx 16rpx;
  margin-top: 20rpx;
  background-color: #ffffff00;
}

.view-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #5876cd;
  border-radius: 20rpx;
  margin: 0rpx 12rpx;
}

.view-box-text {
  display: flex;
  padding: 5rpx;
}

.text-item {
  font-size: 24rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
}

.view-item-image {
  margin-top: 18rpx;
}

.view-item-text {
  margin: 20rpx;
  color: white;
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
  color: #ffffff;
  opacity: 1;
}

.selected-view-box {
  height: auto;
  background: #ffffff;
  box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.06);
  opacity: 1;
  border-radius: 28rpx;
  margin: 28rpx;
  padding: 15rpx 4rpx;
}

.list-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 30rpx;
}

.center-line {
  height: 20rpx;
  width: 2rpx;
  background-color: #ccc;
  margin: 15rpx;
}

.headerTitle-selected {
  color: black;
  font-size: 28rpx;
  font-weight: bold;
  text-shadow: 1px 0px 1px black;
  padding: 5rpx;
}

.headerTitle {
  color: #555;
  font-weight: bold;
  font-size: 26rpx;
  padding: 5rpx;
}

.height60 {
  height: 60rpx;
  width: 100%;
}

.no-data-class {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 500rpx;
}

.item-image-class {
  height: 48rpx;
  width: auto;
}

.view-text-common {
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
  color: #000026;
  opacity: 1;
  margin-top: 16rpx;
}

.item_box {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  justify-content: space-between;
  align-items: center;
}

.bac-test-red {
  background-color: red;
}

.view-text-common-box {
  flex: 1;
  width: 140rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no-more-text-bottom-class {
  height: 180rpx;
  text-align: center;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  opacity: 1;
  margin-top: 46rpx;
}

.load-txt {
  padding: 0 0 20rpx 0;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}

.load-icon {
  width: 380rpx;
  height: 380rpx;
  margin: 0 auto 20rpx auto;
  display: block;
}

.height100 {
  width: 100%;
  height: 100rpx;
}

.load-txt-yincang {
  padding: 0 0 20rpx 0;
  text-align: center;
  color: white;
  font-size: 24rpx;
}

.waterfall-box {
  padding: 0rpx 13rpx 0rpx 13rpx;
  box-sizing: border-box;

  /* 
		.list-item {
			margin-bottom: 0;
			// 设置透明，默认是可视的
			opacity: 0;
			// 默认超出隐藏，不影响加载中的文字显示效果
			overflow: hidden;
			height: 0;
	
			&.show {
				margin-bottom: 5rpx;
				opacity: 1;
				overflow: auto;
				height: auto;
			}
		} */
}

.waterfall-box-left-right {
  padding: 0rpx;
  width: 50%;
}

.h-flex-x {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;

  /* &.h-flex-2 {
			>view {
				width: 50%;
			}
		} */
}
</style>